<!DOCTYPE HTML>
<html lang="en-US">
  <head>

    <title>搜藏</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >


      <link rel="stylesheet" type="text/css" href="styles.css">

	  <!--  vue + axios -->
	  <script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
	  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

	<script type="text/javascript">
	function add(){
		window.open ('fovEdit.html', 'newwindow',
		'height=300, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
	}
	</script>
  </head>
  <body>
    <form name="favForm" method="post" action="/cang/fav.do;jsessionid=FF8C0487A99814B144B07E5633524A0F">
      <input type="hidden" name="op" value="toList" />

    <div class="banner" valign="top">
    	 搜藏
    </div>

	<table id="app" cellspacing="0" cellpadding="0" border="0">
		<tr>
			<td style="text-align:right;" valign="top">
			<!-- 左边Tag列表 -->
				<div class="left_labels" >


				<table class="labels_table" cellspacing="0" cellpadding="0" border="0">
					<tr><td><a href="#" onclick="add();" style="font-weight:bold;">添加书签</a></td></tr>
					<tr>
						<td :class="{selected_label : selected == 'all'}">
							<a href="#" @click.prevent="showAll()">全部</a>
						</td>
					</tr>
					<tr>
						<td :class="{selected_label : selected == 'notTags'}">
							<a href="#" @click.prevent="showNotTags()">未分类</a>
						</td>
					</tr>


					<tr v-for="t in tagList">
						<td :class="{selected_label : selected == t.tid}"><a href="#" @click.prevent="showFov(t)">{{t.tname}}</a></td>
					</tr>


					<tr>
						<td>
							<a style="font-weight:bold;" href="#" @click.prevent="showYun">云图</a>
						</td>
					</tr>
				</table>
				</div>
			</td>
			<td>
			<!-- 右边fav内容 -->
				<div class="content_links">

				<div v-if="selected == null">
					<label v-for="t in tagList" style="margin: 10px; color: black;"
						:style="{fontSize: 14 + t.tcount + 'px' ,
						 		 fontWeight : 300 + t.tcount * 100 }">
						{{t.tname}}
					</label>
				</div>

				<div v-if="selected != null" v-for=" f in clickTag.fList" style="padding:6px 10px;">
					<div>
						<a :href="'http://' + f.furl" style="color:blue;font-size:18px;" target="_blank">
							{{f.flabel}}
						</a>
					</div>
					<div style="color:black;font-size:16px;">
						{{f.fdesc}}
					</div>
					<div style="color:green;font-size:14px;">
						http://{{f.furl}}
					</div>
				</div>
				</div>

			</td>
		</tr>
	</table>

    </form>

  	<script type="text/javascript">
		var v = new Vue({
			el : "#app",
			data : {
				tagList : [],
				clickTag : {fList:[]},
				selected : 'all'
			},
			created(){
				axios.get("allTag.s").then(res=>{
					this.tagList = res.data;
					this.showAll();
				});
			},
			methods : {
				showFov(tag){
					this.selected = tag.tid;
					this.clickTag = tag;
				},
				showAll(){
					this.selected = 'all';
					this.clickTag = {fList:[]};
					for( tag of this.tagList){
						a : for( fov of tag.fList){
							for(fov1 of this.clickTag.fList){
								// 如果已经在数组, 则跳过
								if(fov1.fid == fov.fid ){
									// 命名循环
									continue a;
								}
							}
							this.clickTag.fList.push(fov);
						}
					}
				},
				showNotTags(){
					this.selected = 'notTags';
					this.clickTag = {fList:[]};
					for( tag of this.tagList){
						a : for( fov of tag.fList){
							// 如果已经在数组, 则跳过
							if(fov1.fid == fov.fid ){
								// 命名循环
								continue a;
							}
							if( ! fov.ftags){
								this.clickTag.fList.push(fov);
							}
						}
					}
				},
				showYun(){
					this.selected = null;
				}
			}
		})
	</script>
  </body>
</html>